<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test get, formatter, and renderCell</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dojo/resources/dojo.css";
			@import "../css/skins/claro.css";
			body {
				padding: 0 80px; /* side padding to make it easier to scroll doc */
			}
			
			/* tests for renderCell / renderHeaderCell */
			.renderedCell {
				font-style: italic;
			}
			.renderedHeaderCell {
				text-decoration: underline;
			}
		</style>
		<script src="../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script>
			var store; // defined later, Memory store containing data
			
			function getOrdinal(num){
				// returns a String consisting of num + the appropriate ordinal suffix
				var ord = 'th';
				switch (num % 10) {
					case 1:
						ord = 'st';
						break;
					case 2:
						ord = 'nd';
						break;
					case 3:
						ord = 'rd';
						break;
				}
				return num + ord;
			}
			
			function testFormatter(item){
				return "<h3>Step " + item.order + ": " + item.name + "</h3><p>" +
					item.description + "</p>";
			}
			
			function testGet(item){
				return getOrdinal(item.order);
			}
			
			function testRenderHeaderCell(th){
				var div = document.createElement("div");
				div.className = "renderedHeaderCell";
				div.innerHTML = "Step";
				return div;
			}
			
			function testRenderCell(object, data, td, options){
				var div = document.createElement("div");
				div.className = "renderedCell";
				div.innerHTML = getOrdinal(object.order);
				return div;
			}
			
			var testFormatterScope = {
				foo: function(item){
					return "<h3>" + this.word + " " + item.order + ": " + item.name + "</h3><p>" +
						item.description + "</p>";
				},
				word: "Step" // for testing proper execution context
			};
			
			var columnsLegacyFormatter = [
				{
					label: "Step",
					field: "_item",
					formatter: testFormatter
				}
			];
			
			var columnsLegacyFormatterScope = [
				{
					label: "Step",
					field: "_item",
					formatter: "foo"
				}
			];
			
			var columnsLegacyGet = {
				order: {
					label: "Step",
					get: testGet
				},
				name: {},
				description: {label: "what to do", sortable: false}
			};
			var columnsNew = {
				order: {
					label: "Step",
					renderHeaderCell: testRenderHeaderCell,
					renderCell: testRenderCell
				},
				name: {},
				description: {label: "what to do", sortable: false}
			};
			require(["dgrid/Grid", "dgrid/OnDemandGrid", "dojo/store/Memory", "dojo/store/Observable", "dojo/_base/declare", "dojo/_base/lang", "dojo/parser", "dojo/query", "dgrid/test/data/base", "dojo/domReady!"],
			function(Grid, OnDemandGrid, Memory, Observable, declare, lang, parser, query){
				
				// fully-programmatic tests
				
				window.gridLegacyFormatter = new Grid({
					columns: columnsLegacyFormatter
				}, "gridLegacyFormatter");
				gridLegacyFormatter.renderArray(testOrderedData);
				
				window.gridLegacyFormatterScope = new Grid({
					columns: columnsLegacyFormatterScope,
					formatterScope: testFormatterScope
				}, "gridLegacyFormatterScope");
				gridLegacyFormatterScope.renderArray(testOrderedData);
				
				
				window.gridLegacyGet = new Grid({
					columns: columnsLegacyGet
				}, "gridLegacyGet");
				gridLegacyGet.renderArray(testOrderedData);
				
				window.gridNew = new Grid({
					columns: lang.clone(columnsNew)
				}, "gridNew");
				gridNew.renderArray(testOrderedData);

				
				// also, need a store, since there's currently no way to effectively
				// invoke renderArray from HTML.
				store = Observable(Memory({data: testOrderedData}));
				parser.parse();
				
				// Test 2x: testing dgrid w/o srcNodeRef, or w/ srcNodeRef w/o id
				// Purposely testing with store to see how init is handled.
				// (works fine if you renderArray after node placement)
				
				// Test 2a: srcNodeRef + no id, specify id to dgrid
				window.grid2a = new OnDemandGrid({
					store: store,
					columns: lang.clone(columnsNew),
					id: "test2a"
				}, query(".test2a")[0]);
				
				// Test 2b: srcNodeRef + no id - should end up with id=dgrid_0
				window.grid2b = new OnDemandGrid({
					store: store,
					columns: lang.clone(columnsNew)
				}, query(".test2b")[0]);
				
				// Test 2c: no srcNodeRef, specify id to dgrid
				window.grid2c = new OnDemandGrid({
					store: store,
					columns: lang.clone(columnsNew),
					id: "test2c"
				});
				query(".test2c")[0].appendChild(grid2c.domNode);
				// need to call startup after node is placed manually
				grid2c.startup();
				
				// Test 2d: no srcNodeRef, no id - should end up with id=dgrid_1
				window.grid2d = new OnDemandGrid({
					store: store,
					columns: lang.clone(columnsNew)
				});
				query(".test2d")[0].appendChild(grid2d.domNode);
				// need to call startup after node is placed manually
				grid2d.startup();
			});
			
		</script>
	</head>
	<body class="claro">
		<p>This page tests various responsibilities of renderRow in Grid.js,
			particularly those sensitive to dojox-grid-friendly properties.</p>
		<h2>1a: Grid with single column with formatter for _item field (legacy grid behavior)</h2>
		<div id="gridLegacyFormatter"></div>
		<h2>1b: Grid with single column with formatter for _item field, using formatterScope (legacy grid behavior)</h2>
		<div id="gridLegacyFormatterScope"></div>
		<h2>1c: Grid with single column with get for order field (legacy grid behavior)</h2>
		<div id="gridLegacyGet"></div>
		<h2>1d: Grid with single column with renderCell function</h2>
		<p>(dgrid behavior; should look same as previous but with underlined first header cell
			and italicized first column values)</p>
		<div id="gridNew"></div>
		
		<hr>
		
		<h2>2a: Grid on domnode with no initial id, id specified as param (will become DOM node id)</h2>
		<div class="test2a"></div>
		<h2>2b: Grid on domnode with no initial id, dgrid / DOM node id autogenerated</h2>
		<div class="test2b"></div>
		<h2>2c: Grid with no srcNodeRef (placed inside another domNode), id specified as param (will become DOM node id)</h2>
		<div class="test2c"></div>
		<h2>2d: Grid with no srcNodeRef (placed inside another domNode), dgrid / DOM node id autogenerated</h2>
		<div class="test2d"></div>
	</body>
</html>
